<template>
  <div class="cjy-outer">
    <!-- <div style="width: 100%" v-show="pagePosY < 10 || totalCount< 5 || totalCount == 5">
      <chose-order @choseOrder="choseOrder" :currentConfig="orderConfig" style="position:relative;z-index: 0;">
      </chose-order>


      <chose-thr-list
        style="position:relative;z-index: 0;"
        :secInfo="secInfo"
        @choseThrClassify="choseThrClassify"
        :activeGoodsClassCode="activeGoodsClassCode">
      </chose-thr-list>


    </div>
    <div class="order-ul" v-show="pagePosY >= 10 && totalCount> 5 ">
      {{orderConfig.orderName}}-{{activeGoodsClassName}}({{totalCount}})
    </div> -->
    <div ref="PageListOuter" style="flex:1;overflow: hidden">
      <div style="width: 100%;position:relative" :style="{height:pageListHeight+'px'}">
        <PageList
          v-if="item.classCode  == activeGoodsClassCode"
          v-for="(item) in thrList"
          :key="item.classCode"
          :orderConfig="orderConfig"
          :thrClassInfo="item"
          @changeTotalCount="changeTotalCount">
        </PageList>
      </div>
    </div>
  </div>


</template>

<script>
  import PageList from './PageList/index'
  // import ChoseOrder from '../ChoseOrder'
  // import ChoseThrList from '../ChoseThrList'
  import {mapState} from 'vuex'
  import AddCartAnimate from '@/real-components/AddCartAnimate';

  export default {
    data() {
      return {
        pageListHeight: '0',
        activeGoodsClassCode: '',
        activeGoodsClassName: '',
        orderConfig: {
          orderType: 'isPutTimeSort',
          orderDirection: '2',
          orderName: '综合排序'
        },
        totalCount: 0,
      }
    },
    created() {
      this.init();
      this.$nextTick(() => {
        this.pageListHeight = this.$refs.PageListOuter ? (this.$refs.PageListOuter.offsetHeight-this.$refs.PageListOuter.getBoundingClientRect().top) : 0
      })
    },
    components: {PageList, 
      // ChoseOrder, 
      // ChoseThrList, 
      AddCartAnimate},
    props: {
      secInfo: {
        type: Object,
        default: () => {
          return {}
        }
      },
      activeThrCode: {
        type: String,
        default: ''
      }
    },
    watch: {
      secInfo() {
        this.init()
      }
    },
    computed: {
      ...mapState('cjy', ['pagePosY']),
      // thrClassInfo() {
      //   var {activeGoodsClassCode} = this
      //   var activeThrList = this.thrList.find((item) => {
      //     return activeGoodsClassCode == item.goodsClassCode
      //   })
      //   return activeThrList
      // },
      thrList() {
        return [this.secInfo] || []
      }
    },
    updated() {
      this.$nextTick(() => {
        this.pageListHeight = this.$refs.PageListOuter ? (this.$refs.PageListOuter.offsetHeight-this.$refs.PageListOuter.getBoundingClientRect().top) : 0
      })
    },

    methods: {

      choseThrClassify(item) {
        this.activeGoodsClassCode = item.classCode
        this.activeGoodsClassName = item.className
      },
      choseOrder(data) {
        this.orderConfig = data
      },
      init() {
        var activeIndex = this.thrList.findIndex(item => {
          return item.classCode == this.activeThrCode
        })
        activeIndex = activeIndex == -1 ? 0 : activeIndex
        this.activeGoodsClassCode = this.thrList[activeIndex].classCode
        this.activeGoodsClassName = this.thrList[activeIndex].className
      },
      changeTotalCount(data) {
        this.totalCount = data
      }
    },
  }
</script>

<style scoped>
  .cjy-outer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .order-ul {
    width: 100%;
    height: 2.2rem;
    border-bottom: 1px solid rgb(238, 238, 238);
    padding: 0 0.7rem 0 0.2rem;
    font-size: 0.7rem;
    line-height: 2.2rem;
  }


</style>
